<template>
  <div class="p-3">
    <p>任务中心</p>
    <a-form :model="submitState" @finish="submitCombine" layout="inline">
      <a-form-item
        label="组合"
        name="id"
        :rules="[{ required: true, message: '请选择组合' }]"
      >
        <a-select
          style="width: 500px"
          v-model:value="submitState.id"
          placeholder="请选择组合"
        >
          <a-select-option
            v-for="(op, index) in selOpts"
            :key="index"
            :value="op.id"
          >
            【搜索】{{ op.SearchFilter.keyword }}，【评论】{{
              op.CommentFilter.keywords.toString()
            }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">开始</a-button>
      </a-form-item>
    </a-form>
    <a-divider>视频进度</a-divider>

    <a-row>
      <a-col :span="24">
        <p>列表</p>
        <vxe-table :data="tableData">
          <vxe-column field="avatar_thumb" title="头像" width="160">
            <template #default="{ row }">
              <a-avatar
                :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }"
                :src="
                  row.aweme_info.author.avatar_thumb.url_list
                    ? row.aweme_info.author.avatar_thumb.url_list[0]
                    : ''
                "
              />
              <!-- {{ row.aweme_info.author.avatar_thumb.url_list?row.aweme_info.author.avatar_thumb.url_list[0]:"" }} -->
            </template>
          </vxe-column>
          <vxe-column field="name" title="视频ID" width="160">
            <template #default="{ row }">
              {{ row.aweme_info.aweme_id }}
            </template>
          </vxe-column>
          <vxe-column field="uid" title="用户id" width="160">
            <template #default="{ row }">
              {{ row.aweme_info.author.uid }}
            </template>
          </vxe-column>
          <vxe-column field="nickname" title="昵称" width="160">
            <template #default="{ row }">
              {{ row.aweme_info.author.nickname }}
            </template>
          </vxe-column>
          <vxe-column field="desc" title="描述">
            <template #default="{ row }">
              {{ row.aweme_info.desc }}
            </template>
          </vxe-column>
          <vxe-column field="cover" title="封面">
            <template #default="{ row }">
              <a-image
                :width="160"
                :src="
                  row.aweme_info.video.cover.url_list
                    ? row.aweme_info.video.cover.url_list[1]
                    : ''
                "
              />
            </template>
          </vxe-column>
          <vxe-column field="link" title="视频链接">
            <template #default="{ row }">
              <a-space>
                <a
                  :href="item"
                  v-for="(item, index) in row.aweme_info.video.play_addr
                    .url_list"
                  :key="index"
                  target="_blank"
                  >查看</a
                >
              </a-space>
            </template>
          </vxe-column>
          <vxe-column field="statistics" title="数据">
            <template #default="{ row }">
              <a-tag color="success">
                <template #icon>
                  <check-circle-outlined />
                  评论{{ row.aweme_info.statistics.comment_count }}
                </template>
              </a-tag>
              <a-tag color="processing">
                <template #icon>
                  <check-circle-outlined />
                  收藏{{ row.aweme_info.statistics.collect_count }}
                </template>
              </a-tag>
              <a-tag color="error">
                <template #icon>
                  <check-circle-outlined />
                  分享
                  {{ row.aweme_info.statistics.share_count }}
                </template>
              </a-tag>
              <a-tag color="error">
                <template #icon>
                  <check-circle-outlined />
                  点赞
                  {{ row.aweme_info.statistics.digg_count }}
                </template>
              </a-tag>
            </template>
          </vxe-column>
          <vxe-column title="操作">
            <template #default="{ row }">
              <a-button
                :loading="row.loading"
                type="primary"
                @click="handleComment(row)"
                >{{ !row.btntxt ? "获取" : row.btntxt }}</a-button
              >
            </template>
          </vxe-column>
        </vxe-table>
      </a-col>
    </a-row>
    <a-divider>视频评论</a-divider>
    <a-divider>询盘评论</a-divider>
  </div>
</template>
<script lang="ts" setup>
import { http } from "@/plugins/axios";

import { ref } from "vue";

// keyword部分
const submitState = ref({
  id: null,
});

const submitCombine = async() => {
  console.log(submitState.value);
  await http.request({
    url:`spider`,
    method: "post",
    data: submitState.value
  })
};
// 表格数据

const tableData = ref([]);
const selOpts = ref([]);
const getCombineList = async () => {
  const { data } = await http.request({
    url: "searchcomment/list",
  });
  selOpts.value = data;
};
getCombineList();
</script>

<style lang="scss">

</style>
